﻿<Page x:Class="NewMarkersSample.Pages.PieChartPage"
	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	  xmlns:d3="http://research.microsoft.com/DynamicDataDisplay/1.0"
	  xmlns:wpf="http://schemas.microsoft.com/wpf/2008/toolkit"
	  Title="Pie Chart" Loaded="Page_Loaded" Unloaded="Page_Unloaded">
	<Grid Name="root">
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*"/>
			<ColumnDefinition Width="Auto"/>
		</Grid.ColumnDefinitions>

		<Grid.RowDefinitions>
			<RowDefinition Height="*"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>

		<d3:ChartPlotter Grid.Row="0" Name="plotter">
			<d3:ViewportUIContainer>
				<d3:PieChart Name="chart" Width="500" Height="500" 
							 IndependentValuePath="Income" DependentValuePath="CityName" ItemsSource="{Binding}" 
							 Canvas.Left="10" Canvas.Top="10"
							 StartAngle="{Binding Path=Value, ElementName=startAngleSlider}">
					<d3:PieChart.Resources>
						<d3:BrushHSBConverter SaturationDelta="0.8" LightnessDelta="1.6" x:Key="lighterConverter"/>
						<d3:NegativeRotateTransformConverter x:Key="transformConverter"/>
					</d3:PieChart.Resources>

					<d3:PieChart.MarkerTemplate>
						<DataTemplate>
							<d3:PieChartItem>
								<d3:LiveToolTipService.ToolTip>
									<d3:LiveToolTip Opacity="0.8" Background="{d3:SelfBinding Path=Owner.Background, Converter={StaticResource lighterConverter}}"
											RenderTransform="{d3:SelfBinding Path=Owner.RenderTransform, Converter={StaticResource transformConverter}}"
											RenderTransformOrigin="0,0">
										<TextBlock>
											<Bold>City:</Bold> <TextBlock Text="{Binding CityName}"/>
											<LineBreak/>
											<Bold>Income:</Bold> $<TextBlock Text="{Binding Income}"/>
										</TextBlock>
									</d3:LiveToolTip>
								</d3:LiveToolTipService.ToolTip>
							</d3:PieChartItem>
						</DataTemplate>
					</d3:PieChart.MarkerTemplate>
				</d3:PieChart>
			</d3:ViewportUIContainer>

			<RepeatButton Content="Add random item" Canvas.Right="160" Canvas.Bottom="10" Click="addRandomItemBtn_Click"/>

			<GroupBox Header="Legend style" Canvas.Right="270" Canvas.Bottom="10">
				<StackPanel Background="White">
					<RadioButton Content="Default style" Name="defaultStyle" IsChecked="True" Checked="defaultStyle_Checked"/>
					<RadioButton Content="No scroll style" Name="noScrollStyle" Checked="noScrollStyle_Checked"/>
				</StackPanel>
			</GroupBox>
		</d3:ChartPlotter>

		<!--<d3:PieChart Name="chart2" IndependentValuePath="Income" Grid.Row="0" Visibility="Hidden">
			<d3:PieChart.Resources>
				<d3:BrushHSBConverter SaturationDelta="0.8" LightnessDelta="1.6" x:Key="lighterConverter"/>
				<d3:NegativeRotateTransformConverter x:Key="transformConverter"/>
			</d3:PieChart.Resources>

			<d3:PieChart.MarkerTemplate>
				<DataTemplate>
					<d3:PieChartItem Style="{x:Static d3:PieChartStyles.Donut}">
						<d3:LiveTooltipService.ToolTip>
							<d3:LiveTooltip Background="{d3:SelfBinding Path=Owner.Background, Converter={StaticResource lighterConverter}}"
											RenderTransform="{d3:SelfBinding Path=Owner.RenderTransform, Converter={StaticResource transformConverter}}"
											RenderTransformOrigin="0,0">
								<TextBlock>
									<Bold>City:</Bold> <TextBlock Text="{Binding CityName}"/>
									<LineBreak/>
									<Bold>Income:</Bold> $<TextBlock Text="{Binding Income}"/>
								</TextBlock>
							</d3:LiveTooltip>
						</d3:LiveTooltipService.ToolTip>
					</d3:PieChartItem>
				</DataTemplate>
			</d3:PieChart.MarkerTemplate>
		</d3:PieChart>-->

		<ScrollViewer Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" VerticalScrollBarVisibility="Visible">
			<wpf:DataGrid ItemsSource="{Binding}" AutoGenerateColumns="False" 
					  CanUserDeleteRows="True">
				<wpf:DataGrid.Columns>
					<wpf:DataGridTextColumn Header="City" Binding="{Binding CityName}"/>
					<wpf:DataGridTextColumn Header="Income" Binding="{Binding Income, StringFormat=F2}"/>
				</wpf:DataGrid.Columns>
			</wpf:DataGrid>
		</ScrollViewer>

		<Slider Minimum="0" Maximum="360" Name="startAngleSlider" Grid.Row="1" Grid.Column="0" Margin="5"/>
	</Grid>
</Page>
